/** 计数器组件 */
import React, { Component } from 'react'

// 导入数据仓库实例
import store from '../store'

export default class Counter extends Component {

  add() {
    // 增加数据:发送一个增加数据的actionCreator请求
    // store.dispatch({ type: "INCREMENT", data: 1 })
    store.dispatch({ type: "ADD", data: 1 })
  }

  sub() {
    // 减少数据:发送一个减少数据的actionCreator请求
    store.dispatch({ type: "DECREMENT", data: 1 })
  }

  componentDidMount() {
    // 添加redux更新通知
    store.subscribe(() => {
      // redux中一旦修改数据，该函数就会被调用执行刷新页面
      this.setState({})
    })
  }

  render() {
    console.log(store, "数据仓库实例")
    return (
      <div>
        <h2>计数器组件，redux的基本使用</h2>
        <h4>计数器：{store.getState()}</h4>
        <div>
          <button onClick={this.add.bind(this)}>增加</button>
          <button onClick={this.sub.bind(this)}>减少</button>
        </div>
      </div>
    )
  }
}
